<template>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1 @click="test">
          控制台
        </h1>
        <ol class="breadcrumb">
          <!-- <li class="active">控制台</li> -->
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">
        <!-- Info boxes -->
        <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-aqua"><i class="fa fa-users"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">客户总数</span>
                <span class="info-box-number">90</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-red"><i class="fa fa-user"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">联系人总数</span>
                <span class="info-box-number">100</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->

          <!-- fix for small devices only -->
          <div class="clearfix visible-sm-block"></div>

          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-green"><i class="fa fa-cubes"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">产品总数</span>
                <span class="info-box-number">760</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-yellow"><i class="fa fa-shopping-cart"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">订单总数</span>
                <span class="info-box-number">1000</span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->



        <!-- Main row -->
        <div class="row">
          <!-- Left col -->
          <div class="col-md-8">

              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">销售走势</h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <canvas id="lineChart" style="height:250px"></canvas>
                  </div>
                </div>
                <!-- /.box-body -->
              </div>


            <!-- TABLE: LATEST ORDERS -->
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">未回款订单</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body no-padding">
                <div class="table-responsive">
                  <table class="table no-margin table-hover table-bordered">
                    <thead>
                    <tr>
                      <th>单号</th>
                      <th>客户</th>
                      <th>金额</th>
                      <th>下单时间</th>
                      <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td><a href="pages/examples/invoice.html">OR9842</a></td>
                      <td>阿里巴巴集团</td>
                      <td>155.00</td>
                      <td>2018-12-12</td>
                      <td><a>拜访</a></td>
                    </tr>

                    </tbody>
                  </table>
                </div>
                <!-- /.table-responsive -->
              </div>
              <!-- /.box-body -->
              <div class="box-footer clearfix">
                <a href="javascript:void(0)" class="btn btn-sm btn-primary btn-flat pull-left">全部订单</a>
              </div>
              <!-- /.box-footer -->
            </div>
            <!-- /.box -->


            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">产品库存</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body no-padding">
                <div class="table-responsive">
                  <table class="table no-margin table-hover table-bordered">
                    <thead>
                    <tr>
                      <th>名称</th>
                      <th>型号</th>
                      <th>单价</th>
                      <th>数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>阿里巴巴集团</td>
                      <td>ABC</td>
                      <td>155.00</td>
                      <td>2</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <!-- /.table-responsive -->
              </div>
              <!-- /.box-body -->
              <div class="box-footer clearfix">
                <a href="javascript:void(0)" class="btn btn-sm btn-primary btn-flat pull-left">全部产品</a>
              </div>
              <!-- /.box-footer -->
            </div>
            <!-- /.box -->

          </div>
          <!-- /.col -->

          <div class="col-md-4">
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">客户构成</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="chart-responsive">
                      <canvas id="pieChart" height="150"></canvas>
                    </div>
                    <!-- ./chart-responsive -->
                  </div>
                  <!-- /.col -->
                  <div class="col-md-6">
                    <ul class="chart-legend clearfix">
                      <li><i class="fa fa-circle-o text-red"></i> 战略合作伙伴</li>
                      <li><i class="fa fa-circle-o text-green"></i> 合作伙伴</li>
                      <li><i class="fa fa-circle-o text-yellow"></i> 大客户</li>
                      <li><i class="fa fa-circle-o text-aqua"></i> 重点开发客户</li>
                      <li><i class="fa fa-circle-o text-light-blue"></i> 普通客户</li>
                      <!-- <li><i class="fa fa-circle-o text-gray"></i> Navigator</li> -->
                    </ul>
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
              </div>
              <!-- /.box-body -->

            </div>

            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">客户服务</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="chart-responsive">
                      <canvas id="pieChart1" height="150"></canvas>
                    </div>
                    <!-- ./chart-responsive -->
                  </div>
                  <!-- /.col -->
                  <div class="col-md-6">
                    <ul class="chart-legend clearfix">
                      <li><i class="fa fa-circle-o text-red"></i> 咨询</li>
                      <li><i class="fa fa-circle-o text-green"></i> 建议</li>
                      <li><i class="fa fa-circle-o text-yellow"></i> 投诉</li>
                      <!-- <li><i class="fa fa-circle-o text-gray"></i> Navigator</li> -->
                    </ul>
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
              </div>
              <!-- /.box-body -->

            </div>
            <!-- /.box -->

            <!-- PRODUCT LIST -->

          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</template>

<script>

import axios from '@/modules/Axios'

export default {
    beforeCreate () {
      console.log('Dashboard：beforeCreate')
    },
    created () {
      console.log('Dashboard：created')
    },
    beforeMount () {
      console.log('Dashboard：beforeMount')
    },
    mounted () {
      console.log('Dashboard：mounted')
    },
    name: 'Dashboard',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    beforeRouteEnter(to,from,next) {
        console.log('Dashboard beforeRouteEnter');
        next((vm) => {
            //这里可以访问vm实例
            // console.log(vm.$route);//访问route
            // console.log(vm.$router);//访问router
        });
    },

    beforeRouteUpdate(to,from,next){
        console.log('Dashboard beforeRouteUpdate');
        // console.log(this);
        next();
    },

    beforeRouteLeave(to,from,next){
        console.log('Dashboard beforeRouteLeave');
        // console.log(this);
        next();
    },
    methods:{
        test(){
            // this.$store.commit('user',{
            //     id:2,
            //     name:'唐燕军'
            // });
            axios.get('/index.php').then((response)=>{
                console.log(response);
            }).catch((error)=>{
                console.log(error);
            });
        }
    }
}
</script>
